<template>
	<view>
		<view class="search">
			<view class="search-item">
				<u-search placeholder="输入车牌号"
					shape="square"
					v-model="searchValue"
					:clearabled="true"
					:showAction="false"
					@change="searchChange">
				</u-search>
			</view>
			<view class="add-button" @click="gotoPage('/subPackTask/work/xzgl/clgl/add')">
				添加
			</view>
			<!-- 气泡菜单 -->
			<view>
				<chunLei-popups
				v-model="chunLei"
				:popData="popData"
				@tapPopup="tapPopup"
				:x="350"
				:y="40"
				dynamic
				placement="top-end">
				</chunLei-popups>
			</view>
		</view>
		<view style="margin-top: 100rpx;" v-if="list.length < 1">
			<u-empty
				text="暂无数据"
				icon="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/005b6980c9514d1e8e4a0cee0de018e4.png">
			</u-empty>
		</view>
		<view>
			<u-swipe-action>
				<u-swipe-action-item
				v-for="(item,index) in list" :key="item.id"
				@click="delAction(item)"
				:options="options1">
					<view class="swipe-action u-border-top u-border-bottom" @click="gotoPage('/subPackTask/work/xzgl/clgl/detail?carId='+item.id)">
						<view class="PhotographerBoxL">
							<view class="cu-avatar round xl" :style="'background-image:url('+item.frontImage+')'">
							</view>
							<view class='cu-tag2 margin-top-xs bg-blue radius'>{{item.carNum}}</view>
						</view>
						<view class="PhotographerBoxR">
							<view class="text-sm text-bold">车辆型号：{{item.carType}}</view>
							<view class="text-sm text-grey margin-top-xs">准乘人数：{{item.rideNum}}人</view>
							<view class="text-sm text-grey margin-top-xs">品牌型号：{{item.brand}}</view>
							<!-- <view class="text-sm text-grey margin-top-xs">车辆状态：{{item.carCondition}}</view> -->
							<!-- <view class="text-sm text-grey margin-top-xs">使用状态：{{item.useCondition}}</view> -->
						</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		
		<!-- <view class="cu-card dynamic isCard">
			<view class="cu-item shadow">
			</view>
		</view> -->
		
		<u-modal :show="mtShow" :title='mtTitle' :showCancelButton="true" @cancel="mtShow = false;" @confirm="delConfirm"></u-modal>
	</view>
</template>

<script>
	import { getList, del } from '@/api/car.js'
	import chunLeiPopups from "@/subPackTask/components/chunLei-popups/chunLei-popups.vue";
	export default {
		components:{chunLeiPopups},
		data() {
			return {
				delCarId:'',
				mtTitle:'',
				mtShow:false,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				searchValue:'',
				popData:[
					{
						title:'添加车辆',
						path:'/subPackTask/work/xzgl/clgl/add'
					},
					{
						title:'加好友/群',
					},
				],
				chunLei:false,
				list:[],
			}
		},
		onShow() {
			this.searchValue = ''
			this.getCarList()
		},
		methods: {
			async getCarList(search){
				const { data } = await getList(search);
				if(data.code == 200){
					this.list = data.rows
				}else{
					uni.showToast({ title: '获取车辆列表失败', icon: 'none' })
				}
			},
			async delCar(id){
				const { data } = await del(id);
				if(data.code == 200){
					this.getCarList()
					uni.showToast({ title: '车辆删除成功', icon: 'none' })
				}else{
					uni.showToast({ title: '车辆删除失败', icon: 'none' })
				}
			},
			searchChange(value){
				this.getCarList({carNum:value})
			},
			delAction(item){
				this.delCarId = item.id
				this.mtShow = true
				this.mtTitle = '是否确认删除车辆：'+ item.carNum
			},
			delConfirm(){
				this.mtShow = false
				this.delCar([this.delCarId])
			},
			tapPopup(){
				
			}
		}
	}
</script>

<style>
	page{
		background-color: #f6f6f6;
		color: #333333;
	}
	
	/* .data-box{
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 0rpx;
	} */
	
	/* .cu-card>.cu-item{
		margin: 0 30rpx 30rpx 30rpx;
	} */
	
	.add-button{
		line-height: 104rpx;
		color: #0081ff;
	}
	
	/* .u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			 padding: 25rpx 0;
	
			&__text {
				 font-size: 15px;
				 color: $u-main-color;
				 padding-left: 30rpx;
			 }
		}
	} */
</style>
